/**
 * 
 * 
 * 分类导航的鼠标移入效果
 *   类似于筋斗云
 * 
 */
window.onload = function () {
  var oa = document.querySelectorAll(".Classified-nav li a");
  var oline = document.querySelector("#line")
  for (var i = 0; i < oa.length; i++) {
    oa[i].onmouseover = function () {
      animate(oline, this.offsetLeft);

      oWidth = this.clientWidth;
      oline.style.width = oWidth + 'px';
    }
    var lastposition = 140;

    oa[i].onmouseout = function () {
      animate(oline, lastposition);
      oline.style.width = 78 + 'px';
    }

  }


  //匀速动画
  function animate(element, target) {
    //清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
      //获取元素的当前位置
      var current = element.offsetLeft;
      //移动的步数
      var step = (target - current) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      current += step;
      element.style.left = current + "px";
      if (current == target) {
        //清理定时器
        clearInterval(element.timeId);
      }
    }, 20);
  }







  /**
   * 轮播图
   * 
   */
  var aLi = document.querySelectorAll(".lunbo-out .lunbo-nav li")
  //  console.log(aLi);
  var oImg = document.querySelectorAll(".lunbo-out .lunbo-out-ul li img")
  //  console.log(oImg)
  //  获取左右箭头
  var oPrev = document.querySelector(".lunbo-out .Arrow .prev");
  var oNext = document.querySelector(".lunbo-out .Arrow .next");
  //  console.log(oPrev,oNext)
  var num = 0;

  for (var i = 0; i < aLi.length; i++) {
    aLi[i].setAttribute("index", i);
    aLi[i].onclick = function () {
      for (var j = 0; j < aLi.length; j++) {
        aLi[j].removeAttribute("class");
        oImg[j].style.opacity = "0"
      }
      this.className = "current2";
      oImg[this.getAttribute("index")].style.opacity = "1"
    }
  }




  /**
   * 
   * 轮播图底下的nav
   * 
   */
  var anav = document.querySelectorAll(".All-categories-center-bottom-nav>ul li a");
  var aline = document.querySelector(".line1");
  console.log(anav, aline)
  var oselection = document.querySelectorAll(".All-categories-center-bottom .content .selection")
  console.log(oselection)

  for (var i = 0; i < anav.length; i++) {
    anav[i].setAttribute("data-index", i);
    anav[i].onmouseover = surrent;

  }


  function surrent() {
    for (var j = 0; j < anav.length; j++) {
      anav[j].removeAttribute("class");
      oselection[j].style.display = "none";
    }

    console.log(this.offsetLeft)
    this.className = "current3";
    animate(aline, this.offsetLeft);
    oselection[this.getAttribute("data-index")].style.display = "block"
  }

  function aa() {
    animate(aline, document.querySelector('.current3').offsetLeft);
  }


  // 推荐品牌下面的轮播图
  // 获取左右按钮
  var arrowPrev = document.querySelector(".content .sel-right-arrow .prev")
  console.log(arrowPrev)
  var arrowNext = document.querySelector(".content .sel-right-arrow .next")
  console.log(arrowPrev)
  // 获取导航栏所有的a标签
  var anav1 = document.querySelectorAll(".All-categories-center-bottom-nav ul a");
  console.log(anav1);
  // 获取所有的selection
  var aselection = document.querySelectorAll(".content .selection");
  console.log(aselection)

  var num1 = 0;

  arrowPrev.onclick = function () {
    if (num1 == 0) {
      num1 = 6;
    }
    num1--;
    for (var j = 0; j < anav1.length; j++) {
      anav1[j].classList.remove("current3");
      aselection[j].style.display = "none";

    }
    anav1[num1].classList.add("current3");
    aselection[num1].style.display = "block";
    aa();

    // return false;
  }
  arrowNext.onclick = function () {
    if (num1 == 5) {
      num1 = -1;
    }
    num1++;
    for (var j = 0; j < anav1.length; j++) {
      anav1[j].classList.remove("current3");
      aselection[j].style.display = "none"
    }

    anav1[num1].classList.add("current3");
    aselection[num1].style.display = "block";
    aa();
  }
}


/**
 * 
 * 
 * jQuery 代码
 */

$(function () {
  // 顶部导航显示
  $(document).scroll(function () {
    console.log($(document).scrollTop())
    if ($(document).scrollTop() > 1000) {
      $(".serch-nav-top").stop().slideDown(200)
    }
    if ($(document).scrollTop() < 1000) {
      $(".serch-nav-top").stop().slideUp(200)
    }
  })
  // 顶部导航的搜索框的焦点事件
  //  鼠标移入高亮显示
  $(".serch-nav-top .select li").mouseover(function () {
    $(this).css("backgroundColor", "#f1f1f1").siblings("li").css("backgroundColor", "transparent ")
  }).mouseout(function () {
    $(this).css("backgroundColor", " ")
  })

  // 焦点事件
  $("#serch-nav-top-text").focus(function () {
    $(".serch-nav-top .select .menu").stop().show(200)
  }).blur(function () {
    $(".serch-nav-top .select .menu").stop().show(200)
  })



})